<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件的冒泡</title>
        <script type="text/javascript">
            /* 
            事件的冒泡：指事件的向上传导，当后代元素的事件被触发时，
                       其祖先元素的相同事件也会被触发,大部分情况下的冒泡都是有益的； 
                       (如例子中触发span的单击事件时，会同时触发box1和body的单击事件)
                       （注意：必须是相同事件才能冒泡，而且是向上祖先元素传，而不是向下传）；
            取消冒泡：用当前元素的事件对象来取消其向祖先元素的冒泡 (给需要取消冒泡的元素设置)
                     这样只会触发当前元素的事件，而不会触发其祖先元素的事件;
                     event.canselBubble = true 
                     
             */
            window.onload = function(){
                //为s1绑定单击响应函数
                var s1 = document.getElementById("s1");
                s1.onclick = function(event){
                    event = event || window.event;
                    alert("我是span的单击响应函数");
                    //取消冒泡(这样只会触发s1的事件，而不会再触发其祖先的事件了)
                    event.cancelBubble = true;
                };
                //为box1绑定单击响应函数
                var box1 = document.getElementById("box1");
                box1.onclick = function(){
                    alert("我是box1的单击响应函数");
                };
                //为body绑定单击响应函数
                var body = document.body;
                body.onclick = function(){
                    alert("我是body的单击响应函数");
                };
            };
        </script>

        <style type="text/css">
            #box1{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            }
            #s1{
                background-color: yellow;
            }
        </style>
    </head>

    <body>
        <div id="box1">
            我是box1
            <span id="s1">我是span</span>
        </div>
    </body>
</html>